<template>
  <div class="view-my">
    <el-scrollbar>
      <div class="p-[20px]">
        <div class="title">{{ $t("基本信息") }}</div>

        <el-form
          label-width="100px"
          :model="form"
          :disabled="loading"
          label-position="top"
        >
          <el-form-item label="LOGO">
            <cl-upload v-model="form.logo" />
          </el-form-item>
          <el-form-item label="网站名">
            <el-input v-model="form.webName" :placeholder="请填写网站名" clearable />
          </el-form-item>

          <el-form-item label="域名">
            <el-input v-model="form.domain" :placeholder="请填写网站名" clearable />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :disabled="loading" @click="save">{{
              $t("保存修改")
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "my-info",
});

import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useBase } from "/$/base";
import { useCool } from "/@/cool";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const { service } = useCool();
const { user } = useBase();

// 表单数据
const form = reactive({
  headImg: "",
  nickName: "",
  password: "",
  oldPassword: "",
});

// 保存状态
const loading = ref(false);

// 保存
async function save() {
  loading.value = true;

  await service.base.comm
    .personUpdate(form)
    .then(() => {
      form.password = "";
      form.oldPassword = "";

      ElMessage.success(t("修改成功"));
      user.get();
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });

  loading.value = false;
}

onMounted(() => {
  form.headImg = user.info?.headImg || "";
  form.nickName = user.info?.nickName || "";
});
</script>

<style lang="scss">
.view-my {
  background-color: var(--el-bg-color);
  height: 100%;
  box-sizing: border-box;
  border-radius: 6px;

  .el-form {
    width: 400px;
    max-width: 100%;
  }

  .title {
    margin-bottom: 30px;
    font-size: 15px;
    font-weight: bold;
  }
}
</style>
